function patchAttr(oldVnode = {}, vnode = {}, parentElm) {
    each(oldVnode, (key, val) => { //遍历  oldVnode 看newTreeAttr 是否还有对应的属性
        if (vnode[key]) {
            val !== vnode[key] && setAttr(parentElm, key, vnode[key])
            console.log(val)
            console.log(vnode[key])
            console.log(setAttr(parentElm, key, vnode[key]))
            console.log(vnode[key] && setAttr(parentElm, key, vnode[key]))
            console.log(val !== vnode[key] && setAttr(parentElm, key, vnode[key]))
        }
        else {
            parentElm.removeAttribute(key)
        }
    })

    each(vnode, (key, val) => {//看 oldVnode 是否还有对应的属性，没有就新增
        !oldVnode[key] && setAttr(parentElm, key, val)
    })
}

function each(obj, fn) {//遍历对象
    if (Object.prototype.toString.call(obj) !== '[object Object]') {
        console.error('只能遍历对象！')
        return
    }

    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            var val = obj[key];
            fn(key, val)
        }
    }
}

function setAttr(node, key, value) {
    switch (key) {
        case 'style':
            each(value, (key, val) => {
                node.style[key] = val
            })
            break
        case 'value':
            var tag = node.tag || ''
            tag = tag.toLowerCase()
            if (
                tag === 'input' || tag === 'textarea'
            ) {
                node.value = value
            } else {
                // if it is not a input or textarea, use `setAttribute` to set
                node.setAttribute(key, value)
            }
            break
        default:
            node.setAttribute(key, value)
            break
    }
}

patchAttr({
    tag:'div',
    attrs:{id:'app'},
    children:[{ tag:'span',attrs:{id:'child'},children:['1']}]
  }, {
    tag:'div',
    attrs:{id:'app2'},
    children:[{ tag:'span',attrs:{id:'child'},children:['2']}]
  })